import { Fragment } from '@/components/Fragment'; 
import { Image, View } from '@aws-amplify/ui-react';

import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import { ImageDemo } from './demo';
import {
  DefaultImageExample,
  ImageObjectFitAndPositionExample,
  ImageOptimizationExample,
} from './examples';

## Demo

<ImageDemo />

## Usage

Import the `Image` component. Images are responsive by default (if you're on desktop, try resizing your browser window).

<Example>
  <DefaultImageExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultImageExample.tsx

    ```

  </ExampleCode>
</Example>

### Responsive Image optimization

Use `sizes` and `srcSet` to dynamically load different Image sizes based on screen size/resolution. For more information, see [MDN responsive images article](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).

<Example>
  <ImageOptimizationExample />
  <ExampleCode>
    ```jsx file=./examples/ImageOptimizationExample.tsx

    ```

  </ExampleCode>
</Example>

### Object fit and object position

To control how an Image fits its container, use the `objectFit` and `objectPosition` properties.

<Example>
  <ImageObjectFitAndPositionExample />
  <ExampleCode>
    ```jsx file=./examples/ImageObjectFitAndPositionExample.tsx

    ```

  </ExampleCode>
</Example>

## CSS Styling

### Target classes

<ComponentStyleDisplay componentName="Image" />